<template>
  <div class="type">
    <!-- 新增按钮 -->
    <el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark">
        <el-button type="primary" size="mini" @click="add()">新建假期类型</el-button>
    </div>
    <!-- 条查 -->
    <div class="tiaocha">
    <el-form :inline="true" :model="form" class="demo-form-inline">
  <el-form-item >
    <el-input v-model="form.holidayType" placeholder="请输入假期类型"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="search()">查询</el-button>
  </el-form-item>
</el-form>
 </div>
    </el-col>
</el-row>
    <!-- 表格 -->
      <el-col :span="20">
        <div class="grid-content bg-purple-light">
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                    prop="holidayType"
                    label="假期类型"
                    width="180">
                    </el-table-column>
                    <el-table-column
                    prop="unitDuration"
                    label="单位时长"
                    width="180">
    <template slot-scope="scope">
            <span v-show="scope.row.unitDuration==1">天</span>
            <span v-show="scope.row.unitDuration==2">半天</span>
            <span v-show="scope.row.unitDuration==3">小时</span>
            <span v-show="scope.row.unitDuration==4">分钟</span>
          </template>
                    </el-table-column>
                    <el-table-column
                    prop="isRestrictions"
                    label="余额规则">
                     <template slot-scope="scope">
            <span v-show="scope.row.isRestrictions==1">限制</span>
            <span v-show="scope.row.isRestrictions==2">不限制</span>
          </template>
                    </el-table-column>
                    <el-table-column
                    prop="tuser.nickName"
                    label="负责人"
                    width="180">
                    </el-table-column>
                          <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
                        >修改</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button
                    >
                    </template>
                </el-table-column>
            </el-table>
             <!-- 分页 -->
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="pageNum"
                      :page-sizes="[2, 5, 10, 20]"
                      :page-size="pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total"
                    >
                    </el-pagination>
         </div>
        </el-col>
    </el-row>
  </div>
  
</template>

<script>
export default {
  name: "Type",
  data() {
    return {
    
      tableData: [],
      //分页
      pageNum: 1,
      pageSize: 5,
      total: 0,
      //条查
      form: {
        holidayType: "",
      },
    
    };
  },
  created() {
    this.search();
  },
  methods: {
    //删除
    handleDelete(index, row) {
   
        this.$http.get("holiday/deleteHoliday?id=" + row.id)
        .then((res) => {
          console.log(res)
          if (res.data.code == 200) {
            this.$message({
              message: "恭喜你，删除成功",
              type: "success",
            });
            this.search();
          } else {
            this.$message.error("错了哦，删除失败");
          }
        });
     
    },
    //回显
    handleEdit(index, row) {
     this.$router.push({path:'/updatetype',query: {id: row.id }})
    },
    //新增假期类型跳转
    add() {
      this.$router.push("/updatetype");
    },
    //条查 分页
    search() {
         this.$http.post(
          "holiday/findholidayPagination?pageNum=" +
            this.pageNum +
            "&pageSize=" +
            this.pageSize,
          this.form
        )
        .then((res) => {
          console.log(res.data.rows);
          this.tableData = res.data.rows;
          this.total = res.data.total;
        });
    },
    //分页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.search();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.search();
    },
  },
};
</script>

<style scoped>
.tiaocha {
  display: block;
  float: right;
}
 
</style>